<template>
  <div class="chat-container">
    <!-- 聊天头部 -->
    <el-header class="chat-header">
      <h2>💬 简易聊天室</h2>
    </el-header>

    <!-- 聊天主体：消息列表 -->
    <el-main class="chat-main">
      <div class="messages" ref="messagesContainer">
        <div
          v-for="(msg, index) in messages"
          :key="index"
          :class="['message', msg.self ? 'message-self' : 'message-other']"
        >
          <span class="message-content">{{ msg.text }}</span>
          <div class="message-meta">
            <span class="sender">{{ msg.sender }}</span>
            <span class="time">{{ msg.time }}</span>
          </div>
        </div>
      </div>
    </el-main>

    <!-- 底部输入区域 -->
    <el-footer class="chat-footer">
      <el-input
        v-model="inputMessage"
        placeholder="请输入消息..."
        @keyup.enter="sendMessage"
        clearable
      >
        <template #append>
          <el-button type="primary" @click="sendMessage">发送</el-button>
        </template>
      </el-input>
    </el-footer>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'

// 消息列表
const messages = ref([
  { sender: '系统', text: '欢迎进入聊天室！', time: '10:00', self: false },
  { sender: '小明', text: '大家好，今天天气不错！', time: '10:01', self: false },
])

// 输入框内容
const inputMessage = ref('')

// 滚动到底部
const messagesContainer = ref(null)
const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

// 发送消息
const sendMessage = () => {
  const text = inputMessage.value.trim()
  if (!text) return

  const now = new Date()
  const time = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0')

  messages.value.push({
    sender: '我',
    text,
    time,
    self: true,
  })

  inputMessage.value = ''
  scrollToBottom()
}

// 页面加载后自动滚动到底
onMounted(() => {
  scrollToBottom()
})
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.chat-header {
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-weight: 600;
}

.chat-main {
  flex: 1;
  background-color: #f5f5f5;
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  position: relative;
}

.message-content {
  display: block;
  margin-bottom: 4px;
}

.message-meta {
  font-size: 12px;
  opacity: 0.7;
  display: flex;
  justify-content: space-between;
}

.message-other {
  align-self: flex-start;
  background-color: white;
  border: 1px solid #e0e0e0;
}

.message-self {
  align-self: flex-end;
  background-color: #409eff;
  color: white;
}

.message-self .message-meta {
  color: rgba(255, 255, 255, 0.8);
}

.chat-footer {
  padding: 10px;
  background: white;
  border-top: 1px solid #e0e0e0;
}
</style>